<template>
  <section class="featured-articles">
    <SectionTitle title="特别推荐" />
    <div class="featured-slider">
      <div class="scroll-btn left" v-if="showLeft" @click.stop="scrollLeft">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path
            d="M17.5 22L11.5 14L17.5 6"
            stroke="currentColor"
            stroke-width="2.2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="scroll-btn right" v-if="showRight" @click.stop="scrollRight">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path
            d="M10.5 6L16.5 14L10.5 22"
            stroke="currentColor"
            stroke-width="2.2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="articles-container scroll-area" ref="containerRef" @scroll="updateScrollBtns">
        <router-link
          v-for="article in props.articles"
          :key="article.id"
          :to="`/article/${article.id}`"
          class="featured-card-link"
        >
          <article class="featured-card" :style="{ backgroundImage: `url(${article.picUrl})` }">
            <div class="card-overlay">
              <span class="category-tag">{{ article.category?.name }}</span>
              <div class="card-content">
                <h3 class="title">{{ article.title }}</h3>
                <div class="meta">
                  <div class="meta-left">
                    <span class="author">
                      <i class="ri-user-line"></i>
                      {{ article.author?.nickname }}
                    </span>
                    <span class="views">
                      <i class="ri-eye-line"></i>
                      {{ article.viewsNum }}
                    </span>
                    <span class="likes">
                      <i class="ri-thumb-up-line"></i>
                      {{ article.likeNum || 0 }}
                    </span>
                    <span class="comments">
                      <i class="ri-chat-3-line"></i>
                      {{ article.commentsNum || 0 }}
                    </span>
                  </div>
                  <span class="date">
                    <i class="ri-calendar-2-line"></i>
                    {{ timeAgo(article.createOn) }}
                  </span>
                </div>
              </div>
            </div>
          </article>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script setup>
import SectionTitle from '@/components/SectionTitle.vue'
import { timeAgo } from '@/utils/timeUtils'
import { ref, onMounted, watch, nextTick } from 'vue'

const containerRef = ref(null)
const showLeft = ref(false)
const showRight = ref(false)

function updateScrollBtns() {
  const el = containerRef.value
  if (!el) return
  showLeft.value = el.scrollLeft > 10
  showRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 10
}

function scrollLeft() {
  const el = containerRef.value
  if (!el) return
  el.scrollBy({ left: -el.clientWidth * 0.8, behavior: 'smooth' })
  setTimeout(() => updateScrollBtns(), 400)
}
function scrollRight() {
  const el = containerRef.value
  if (!el) return
  el.scrollBy({ left: el.clientWidth * 0.8, behavior: 'smooth' })
  setTimeout(() => updateScrollBtns(), 400)
}

onMounted(() => {
  nextTick(() => {
    updateScrollBtns()
    if (containerRef.value) {
      containerRef.value.addEventListener('scroll', updateScrollBtns)
      window.addEventListener('resize', updateScrollBtns)
    }
  })
})
watch(() => containerRef.value, updateScrollBtns)

const props = defineProps({
  articles: {
    type: Array,
    required: true,
  },
})

watch(
  () => props.articles,
  () => {
    nextTick(() => updateScrollBtns())
  },
  { immediate: true },
)
</script>

<style scoped>
.featured-articles {
  position: relative;
  display: flex;
  flex-direction: column;
}
.featured-slider {
  position: relative;
}
.articles-container.scroll-area {
  display: flex;
  overflow-x: auto;
  gap: 1.5em;
  padding: 4px 8px 1em 8px;
  margin-left: -8px;
  margin-right: -8px;
  scrollbar-width: none;
  position: relative;
}
.articles-container::-webkit-scrollbar {
  display: none;
}

.featured-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  flex-shrink: 0;
  /* PC 端：三列布局，减去两处列间距(1.5em*2)后等分 */
  flex-basis: calc((100% - 3em) / 3);
}

.featured-card {
  height: 200px;
  border-radius: var(--radius-large);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-light);
}
.featured-card-link:hover .featured-card {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-medium);
}

.card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1em;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  color: #fff;
}

.category-tag {
  position: absolute;
  top: 1em;
  left: 1em;
  font-size: 0.8em;
  font-weight: 500;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-base);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-content {
  width: 100%;
}

.title {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.7em 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.meta {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meta-left {
  display: flex;
  align-items: center;
  gap: 1em;
}
.meta span {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .featured-card-link {
    flex-basis: calc(100% / 2.2);
  }
  .scroll-btn {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .featured-card-link {
    flex-basis: calc(100% / 1.3);
  }
  .featured-card {
    height: 120px;
    border-radius: 12px;
  }
  .card-overlay {
    padding: 0.6em;
  }
  .category-tag {
    top: 0.5em;
    left: 0.5em;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 8px;
  }
  .title {
    font-size: 0.95em;
    margin-bottom: 0.4em;
  }
  .meta {
    font-size: 0.7em;
  }
}

.scroll-btn {
  position: absolute;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 60%, rgba(240, 240, 240, 0.7) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.18s;
  color: #444;
  opacity: 0.92;
  border: none;
  outline: none;
  user-select: none;
  pointer-events: auto;
  top: 50%;
  transform: translateY(-60%);
}
.scroll-btn svg {
  display: block;
}
.scroll-btn:hover {
  background: linear-gradient(135deg, #fff 70%, #f3f3f3 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}
.scroll-btn.left {
  left: 16px;
}
.scroll-btn.right {
  right: 16px;
}
</style>
